<input type="hidden" name="users" value="<?php echo $userid; ?>"/>
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<style type="text/css">
input[type=text]{	
	border:none;	
	}
</style>
<div class="row-fluid">

<div class="span3">
	<input type="hidden" name="user" value="<?php echo ucfirst($this->common_model->get_username_id($userid));?>" readonly /><h4><?php echo ucfirst($this->common_model->get_username_id($userid));?></h4><br>
	<?php foreach ($designationbyid as $deg):?>
		<h5 style="margin-top: -20px;"><?php echo ucfirst($deg->name);?></h5>
		<?php endforeach?>
</div>

<div class="span4">
	<!--<input type="submit" class="btn btn-success" value="Thanks"/><br><br>
	<input type="submit" class="btn btn-info" value="Follow"/>-->
</div>


<div class="span2">

</div>

</div>
<br />
<br />

<?php if($this->session->flashdata('msg')): ?>
<div class="alert alert-success" ><?php echo $this->session->flashdata('msg')?></div>
<?php endif;?>
<?php include('application/views/common/tabs.php'); ?>
 <?php foreach($efficiencychart as $rows):?>
  <?php	$show_efficiency=$rows->name; ?>
	<?php endforeach;?>
<?php
if(!empty($show_efficiency)){?>

<h1 style=" z-index:50;" align="center"></h1>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([['Name', 'Efficiency'],
		<?php  
		foreach ($efficiencychart as $rows):
		$namelevel= '['.'\''.$rows->name.'\','.$rows->level.']'.',';
		echo $namelevel; endforeach; ?>
         ]);

        var options = {
          
		};

        var chart = new google.visualization.PieChart(document.getElementById('chart_div1'));
        chart.draw(data, options);
      }
    </script>
<div class="span11" style="border-bottom: 1px dashed #ccc; margin-top: 10px;">
<h1 style="font-family: 'Roboto Slab', serif;font-weight: 400;" align="center">
		I am a part <b style="color: #b21415;font-weight: 100"><?php
					$capitalname1=ucfirst($efficiencyfields[1]['name']);
					print_r($capitalname1);?> </b>
		& part 
					<b style="color: #b21415; font-weight: 100"><?php 
					$capitalname2=ucfirst($efficiencyfields[0]['name']);
					print_r($capitalname2);?></b>
	</h1>
	
	</div>
	<div class="span11">
	
	<div style="float:left;width: 200px; height: 300px;z-index:50; margin-top:180px; position:absolute">
		<h2 style="font-family: 'Roboto Slab', serif;font-weight: 400;">
		<?php
		$efficiencyname1=strtoupper($efficiencyfields[1]['name']);
		print_r($efficiencyname1);?></h2>	
		<h4 style="font-family: 'Roboto Slab', serif;font-weight: 100; color: #666;"><?php
		$values = str_replace( ',', '<br /><br>', $efficiencyfields[1]['custom_subfields'] );
		echo $values; ?></h4>
	</div>
    <div id="chart_div1" style="width: 1000px; height: 600px;float:left;  margin-left:70px; "></div>

	<div style="float:left;width: 200px; height: 300px; margin-left:780px;margin-top:180px; z-index:50; position:absolute">
		<h2 style="font-family: 'Roboto Slab', serif;font-weight: 400;">
		<?php
		$efficiencyname=strtoupper($efficiencyfields[0]['name']);
		print_r($efficiencyname);?></h2>	
		<h4 style="font-family: 'Roboto Slab', serif;font-weight: 100;color: #666;"><?php
		$values = str_replace( ',', '<br /><br>', $efficiencyfields[0]['custom_subfields'] );
		echo $values; ?></h4>
	</div>
	</div>

<script type="text/javascript">
  setTimeout(function(){

        $('.progress .bar').each(function() {
            var me = $(this);
            var perc = me.attr("data-percentage");

            //TODO: left and right text handling

            var current_perc = 0;

            var progress = setInterval(function() {
                if (current_perc>=perc) {
                    clearInterval(progress);
                } else {
                    current_perc +=1;
                    me.css('width', (current_perc)+'%');
                }

                me.text((current_perc)+'%');

            }, 50);

        });

    },300);

</script>
<div class="row-fluid">

<div class="span12" style="border-bottom: 1px dashed #ccc">
<h1 align="center" style="font-family: 'Roboto Slab', serif;font-weight: 400;">Skills Set</h1>
<h3 align="center" style="font-family: 'Roboto Slab', serif;font-weight: 100;">What I know</h3>
</div>
 
<style>
	#div1{
		float:left;
		width: 300px;
		margin-left: 220px;
		margin-top: 50px;
	}
	#div2{
		float:left;
		width: 300px;
		margin-left: 70px;
		margin-top: 50px;
	}
	
</style>
		<? 
$rowcount = count($skillschart);
echo "<div id='div1'>";
$i = 0;

/*$bar = array(" progress-success"," progress-danger"," progress-info"," progress-warning");
$k = array_rand($bar);
$v = $bar[$k];
*/

/*$bar = array(" progress-success"," progress-danger"," progress-info"," progress-warning");
$length = count($bar);*/

 foreach($skillsimage as $skillimg) { ?>
 		<div style="width:50px;height:50px; float: left; margin-right: 10px;">
		<img src="<?= $this->config->base_url(); ?>assets/images/skills/<?php echo $skillimg->image;?>" 
			title="<?php echo $skillimg->oldname;?>">
			</div>
			<?php echo $skillimg->newname;
			
			echo '<div class="progress progress-striped active "><div class="bar" style="float:left; width:0%; " data-percentage="'.$skillimg->level.'"></div></div>';
			echo "<br>";
		
  			$i++;
 
  
  			if ($i == floor($rowcount / 2)) 
		{
      		echo "</div><div id='div2'>";
  		}
}
echo "</div>";
?>
</div>	
			
	
	
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable([
          ['Tool', <?php  
		foreach ($toolschart as $tool):
		$toolname= '\''.$tool->name.'\',';
		echo $toolname;
		endforeach;
		?>],
          ['Tool',  <?php  
		foreach ($toolschart as $tool):
		$toollevel= $tool->level.',';
		echo $toollevel;
		endforeach;?> ],
        ]);

        var options = {
          title : '',
          vAxis: {title: "Proficiency"},
          hAxis: {title: "Tools"},
          seriesType: "bars",
          series: {10: {type: "line"}}
        };

        var chart = new google.visualization.ComboChart(document.getElementById('chart_div2'));
        chart.draw(data, options);
      }
      google.setOnLoadCallback(drawVisualization);
    </script>

<div class="row-fluid" style="margin-top:100px; ">
<div class="span12" style="border-bottom: 1px dashed #ccc; z-index: 50; position: relative;">
<h1 align="center" style="font-family: 'Roboto Slab', serif;font-weight: 400;">Software Proficiency</h1>
<h3 align="center" style="font-family: 'Roboto Slab', serif;font-weight: 100;">What I Use</h3>
 </div>
 
    <div id="chart_div2" style="width: 900px; height: 500px; margin-left:100px; margin-top:100px;"></div>
</div>




<div class="row-fluid" style="margin-top: 30px;">
<div class="span12" style="border-bottom: 1px dashed #ccc; z-index: 50; position: relative;">
<h1 align="center" style="font-family: 'Roboto Slab', serif;font-weight: 400;">Hobbies/Interests</h1>
<h3 align="center" style="font-family: 'Roboto Slab', serif;font-weight: 100;">I like to spend my After Hours</h3>
</div>
	<div class="span1"></div>
	<div class="span4 offset3">
	<?php foreach ($hobbyimage as $hobby):?>
		
			<div style="float: left; margin-top: 40px; padding: 5px"><img class="tooltips" src="<?= $this->config->base_url(); ?>assets/images/hobbies/<?php echo $hobby->location;?>" title="<?php echo $hobby->name;?>"></div>
			
                <?php endforeach?>
		</div>		

<?php }
else{
		echo "Job Profile Not Set !";
	}
	?>
</div>

<table height="100px;" style="margin-top: 20px;">
	<tr><td>

	</td></tr>
</table>

